<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery.cssHooks | jQuery API 中文手册</title>
<meta name="author" content="jQuery 中文手册 - hemin.cn/jq/">
<meta name="description" content="直接向 jQuery 中添加钩子，用于覆盖设置或获取特定 CSS 属性时的方法，目的是为了标准化 CSS 属性名或创建自定义属性。 - jQuery API 中文手册">
<meta name="keywords" content="jquery,chm,手册,在线,api">
<link type="image/x-icon" href="http://hemin.cn/jq/img/favicon.ico" rel="shortcut icon">
<link type="text/css" rel="stylesheet" href="static/css/style.css">
</head>
<body id="split">
<div id='left' class='dtree'>
  <p style="text-align:center">
    <input type="text" name="query" id="query" placeholder="请输入关键字">
    <!--<input type="button" id="butsoso" value="搜索" />--></p>
  <p style="margin:7px 0; text-align:center"><a href="javascript:void(0)" id="openAll">全部展开</a> | <a href="javascript:void(0)" id="closeAll">全部折叠 </a> | <a href="index.html">速查表</a></p>
	<div id="menu">
    
    </div>
</div>
<div id="content" class="a2">
  <div rel="jQuery.cssHooks">
    <h2><span>返回值:Object</span>jQuery.cssHooks</h2>
    <h3><em>1.4.3</em>概述</h3>
    <div class="desc">
      <p>直接向 jQuery 中添加钩子，用于覆盖设置或获取特定 CSS 属性时的方法，目的是为了标准化 CSS 属性名或创建自定义属性。</p>
      <div class="longdesc">
        <div>
          <p>$.cssHooks 对象提供了一种通过定义函数来获取或设置特定 CSS 值的方法。可以用它来创建新的 cssHooks 用于标准化 CSS3 功能，例如，盒子阴影（box shadows）及渐变（gradients）。 </p>
          <p>例如，某些基于 Webkit 的浏览器会使用 -webkit-border-radius 来设置对象的 border-radius，然而,早先版本的 Firefox 则使用 -moz-border-radius。cssHook 就可以将这些不同的写法进行标准化，从而让 .css() 可以使用统一的标准化属性名(border-radius 或对应的 DOM 属性写法 borderRadius)。 </p>
          <p>该方法除了提供了对特定样式的处理可以采用更加细致的控制外，$.cssHooks 同时还扩展了 .animate() 方法上的属性集。 </p>
          <p>定义一个新的 cssHook 十分简单。下面的模板可以方便您创建自己的 cssHook：</p>
          <pre>(function($) {
    // first, check to see if cssHooks are supported
    if ( !$.cssHooks ) {
      // if not, output an error message
      throw(&quot;jQuery 1.4.3 or above is required for this plugin to work&quot;);
      return;
    }
      $.cssHooks[&quot;someCSSProp&quot;] = {
      get: function( elem, computed, extra ) {
        // handle getting the CSS property
      },      set: function( elem, value ) {
        // handle setting the CSS value 
     }
    };
  })(jQuery);  </pre>
          <h4 id="feature-testing">功能测试</h4>
          <p>在标准化 CSS 属性之前，首先要判断浏览器是否支持待标准的属性或经过变化（例如，带前缀）的属性。例如，要检查浏览器是否支持 border-radius 属性，还要检查该属性的任何变种写法是否是临时元素的 style 对象中的成员。 </p>
          <pre>(function($) {
    function styleSupport( prop ) {
      var vendorProp, supportedProp,
            // capitalize first character of the prop to test vendor prefix
          capProp = prop.charAt(0).toUpperCase() + prop.slice(1),
          prefixes = [ &quot;Moz&quot;, &quot;Webkit&quot;, &quot;O&quot;, &quot;ms&quot; ],
          div = document.createElement( &quot;div&quot; );
        if ( prop in div.style ) {
          // browser supports standard CSS property name 
       supportedProp = prop;
      } else {
          // otherwise test support for vendor-prefixed property names
        for ( var i = 0; i &lt; prefixes.length; i++ ) {
          vendorProp = prefixes[i] + capProp;
          if ( vendorProp in div.style ) {
            supportedProp = vendorProp;
            break;
          }
        }
      }
        // avoid memory leak in IE
      div = null;
            // add property to $.support so it can be accessed elsewhere
      $.support[ prop ] = supportedProp;
            return supportedProp;
    }
      // call the function, e.g. testing for &quot;border-radius&quot; support:
    styleSupport( &quot;borderRadius&quot; );
  })(jQuery);  </pre>
          <h4 id="defining-complete-csshook">定义一个完整的 cssHook</h4>
          <p>为了定义一个完整的 cssHook，首先我们需要测试您当前使用的 jQuery 版本是否支持 cssHooks 方法，此外，还要结合上面提到的例子：</p>
          <pre>(function($) {
    if ( !$.cssHooks ) {
      throw(&quot;jQuery 1.4.3+ is needed for this plugin to work&quot;);
      return;
    }
        function styleSupport( prop ) {
      var vendorProp, supportedProp,
          capProp = prop.charAt(0).toUpperCase() + prop.slice(1),
          prefixes = [ &quot;Moz&quot;, &quot;Webkit&quot;, &quot;O&quot;, &quot;ms&quot; ],
          div = document.createElement( &quot;div&quot; );
        if ( prop in div.style ) {
        supportedProp = prop;
      } else {
        for ( var i = 0; i &lt; prefixes.length; i++ ) {
          vendorProp = prefixes[i] + capProp;
          if ( vendorProp in div.style ) {
            supportedProp = vendorProp;
            break;
          }
        }
      }
        div = null;
      $.support[ prop ] = supportedProp
      return supportedProp;
    }
      var borderRadius = styleSupport( &quot;borderRadius&quot; );
      // Set cssHooks only for browsers that
    // support a vendor-prefixed border radius
    if ( borderRadius &amp;&amp; borderRadius !== &quot;borderRadius&quot; ) {
      $.cssHooks.borderRadius = {
        get: function( elem, computed, extra ) {
          return $.css( elem, borderRadius );
        },
        set: function( elem, value) {
          elem.style[ borderRadius ] = value;
        }
      };
    }
  })(jQuery);  </pre>
          <p>之后，您就可以在支持该属性的浏览器中使用 DOM (camel 式) 样式的写法或使用 CSS (带连字符号) 样式的写法来设置边框的半径了：</p>
          <pre>$(&quot;#element&quot;).css(&quot;borderRadius&quot;, &quot;10px&quot;);
  $(&quot;#another&quot;).css(&quot;border-radius&quot;, &quot;20px&quot;);  </pre>
          <p>如果浏览器不支持任何一种形式的 CSS 属性写法，并且也不支持任何前缀写法，那么该样式是不会应用到元素上的。但是，如果浏览器支持某种特殊的写法，那么可以在 cssHooks 中添加对该特殊用法的支持。</p>
          <pre> (function($) {
    // feature test for support of a CSS property
    // and a proprietary alternative
    // ...
       if ( $.support.someCSSProp &amp;&amp; $.support.someCSSProp !== &quot;someCSSProp&quot; ) {
        // Set cssHooks for browsers that
      // support only a vendor-prefixed someCSSProp
      $.cssHooks.someCSSProp = {
        get: function( elem, computed, extra ) {
          return $.css( elem, $.support.someCSSProp );
        },
        set: function( elem, value) {
          elem.style[ $.support.someCSSProp ] = value;
        }
      };
    } else if ( supportsProprietaryAlternative ) {
      $.cssHooks.someCSSProp = {
        get: function( elem, computed, extra ) {
          // Handle crazy conversion from the proprietary alternative
         },
        set: function( elem, value ) {
          // Handle crazy conversion to the proprietary alternative
        }
      }
   }
    })(jQuery);  </pre>
          <h4 id="special-units">特殊单位</h4>
          <p>默认情况下，通过 .css() 方法设置的值，jQuery 会为其加上 &quot;px&quot; 单位。您可以通过向 jQuery.cssNumber 对象中添加属性的方法来防止这种行为的发生。 </p>
          <pre>$.cssNumber[&quot;someCSSProp&quot;] = true;</pre>
          <h4 id="animating">动画与 cssHooks</h4>
          <p>通过向 jQuery.fx.step 对象中添加属性，cssHook 同样可以向 jQuery 的动画机制中添加钩子： </p>
          <pre>$.fx.step[&quot;someCSSProp&quot;] = function(fx){
    $.cssHooks[&quot;someCSSProp&quot;].set( fx.elem, fx.now + fx.unit );
  };  </pre>
          <p>注意，上述这种用法应用于简单的数值属性的动画是最好的。根据不同的 CSS 属性，返回值的类型以及动画的复杂性，可能需要在 cssHooks 写更多的代码。</p>
        </div>
        <p>&nbsp;</p>
      </div>
    </div>
  </div>

</div>
</body>
<script type="text/javascript" src="static/js/jquery.min.js"></script>
<script type="text/javascript" src="static/js/jquery.autocomplete.js"></script>
<script type="text/javascript" src="static/js/dtree.js"></script>
<script type="text/javascript" src="static/js/js.js"></script>
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "//hm.baidu.com/hm.js?27646e8f048a16e17f027842e6bdb8f0";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>
</html>
